<template>
	<view class="pt-hotsale">
		<view class="pt-hotsale-list" v-if="list.length">
			<view class="pt-hotsale-item" v-for="(data,index) in list" :key="index" @click="goProInfo(data.goods_id,data.goods_type)">
				<view class="pt-hotsale-topicon">
					<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/index/top1.png" v-if="index==0"></image>
					<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/index/top2.png" v-else-if="index==1"></image>
					<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/index/top3.png" v-else-if="index==2"></image>
					<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/index/top4.png" v-else></image>
					<view class="topIndex" :class="{noTop: index > 2}">
						<view v-if="index < 3">TOP</view>
						<view>{{index+1}}</view>
					</view>
				</view>
				<view class="image"><image :src="data.image" mode="aspectFit"></image></view>
				<view class="name">{{data.goods_name}}</view>
				<view class="count">
				 <image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/index/sale-icon.png"></image>	销量：{{data.number}}件
				</view>
			</view>
		</view>
		<pt-nothing :text="'暂无'+name+'商品'" bgColor="#FFF" style="margin-top: -30rpx;" v-else></pt-nothing>
	</view>
</template>

<script>
	export default {
		props: {
			name: {
				type: String,
				default: ''
			},
			list: {
				type: Array,
				default(){
					return []
				}
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			goProInfo(goods_id,goods_type){
				this.$emit('GoInfoAddFoot')
				switch (goods_type){
					case 1:
						getApp().goProInfo(goods_id)
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.pt-hotsale-list{
		padding: 0 30rpx 30rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.pt-hotsale-item{
			width: 216rpx;
			margin-bottom: 30rpx;
			box-shadow: 0px 20rpx 40rpx 0px rgba(40, 34, 31, 0.05);
			padding-bottom: 30rpx;
			position: relative;
			.pt-hotsale-topicon{
				position: absolute;
				z-index: 1;
				image{
					width: 57rpx;
					height: 68rpx;
				}
				.topIndex{
					position: absolute;
					top: 0;
					left: 50%;
					text-align: center;
					transform: translate(-50%,0);
					color: #FFF;
					line-height: 24rpx;
					view:first-child{
						font-size: 20rpx;
					}
					&.noTop{
						color: #342C25;
						font-weight: bold;
						top: 50%;
						transform: translate(-50%,-50%);
					}
				}
			}
			.image{
				image{
					width: 216rpx;
					height: 216rpx;
					border-radius: 8rpx 8rpx 0px 0px;
				}
			}
			.name{
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 24rpx;
				color: #28221F;
				margin: 20rpx 0;
				padding: 0 10rpx;
				text-align: center;
			}
			.count{
				text-align: center;
				font-size: 22rpx;
				color: #4D4D4D;
				padding: 0 10rpx;
				image{
					width: 24rpx;
					height: 24rpx;
					vertical-align: middle;
					margin: -4rpx 10rpx 0 0;
				}
			}
		}
	}
</style>
